import React, { Component } from "react";

export default class MyInput extends Component {
  //   3、使用React，实现如下组件，完成 React 组件封装，并且不失input原生组件能力, 不能使用原生maxLength
  // 注意组件的 defaultValue 功能，以及 value 受控模式的展示
  // | API          | 描述                     | 类型                   |
  // | ------------ | ------------------------ | ---------------------- |
  // | value        | 当前的 value 值          | string                 |
  // | defaultValue | 初始化的 value 值        | string                 |
  // | onChange     | 发生改变的时候触发的回调 | Function(value, event) |
  // | maxLength    | 最大长度                 | Number                 |
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      length: 0,
    };
  }
  handleChange = (e) => {
    let maxlength = e.target.value;
    // this.props.onChange(e.target.value);
    this.setState({
      value: maxlength.length > 10 ? maxlength.slice(0, 10) : maxlength,
      length: maxlength.length > 10 ? 10 : maxlength.length,
    });
  };
  // 你的代码
  render() {
    const { value, length } = this.state;
    // 你的代码
    return (
      <div style={{ display: "flex", border: "1px solid red", width: 200 }}>
        <input
          value={value}
          onChange={this.handleChange}
          style={{ border: "none", outline: "none" }}
        />
        <div>{length}/10</div>
      </div>
    );
  }
}

// 组件支持输入以下 props
// MyInput.propTypes = {
//     maxLength: PropTypes.number.isRequired,
// }

// MyInput.defaultProps = {
//     maxLength: 10,
// }
